<template>
    <view :style="themeColor">
        <view class="material-list">
            <view class="material-li">
                <view class="item-head">
                    <image class="head-img" mode="aspectFill" :src="easyGetImgUrl(data.HeadImage)"></image>
                    <view class="head-info">
                        <view class="head-name">{{ data.NickName || data.RealName }}</view>
                        <view class="head-time">{{ data.AddTime }}</view>
                    </view>
                </view>
                <rich-text
                    style="padding-top: 10rpx; display: block"
                    v-if="data.Content"
                    :nodes="formatRichTextFn(data.Content)">
                </rich-text>
                <!-- 图片 -->
                <view class="imgBox" v-if="data.ImageArray && data.ImageArray.length > 0">
                    <view class="text-img" v-for="img in data.ImageArray" wx:key="*this" wx:for-item="img">
                        <image
                            mode="aspectFill"
                            :src="easyGetImgUrl(img)"
                            :data-src="easyGetImgUrl(img)"
                            @tap="previewImage"></image>
                    </view>
                </view>
                <view class="btn-box">
                    <button @click="copy(data.Content)" class="downloadBtn" v-if="data.Content">复制文案</button>
                    <button @click="saveImage" class="downloadBtn" v-if="data.ImageArray && data.ImageArray.length">
                        下载图片
                    </button>
                    <button open-type="share" class="downloadBtn">立即分享</button>
                </view>
            </view>
        </view>
        <view class="link" v-if="data.ProductList && data.ProductList.length > 0">相关链接</view>
        <view class="goods-list" v-if="data.ProductList && data.ProductList.length > 0">
            <view class="goods-li" v-for="pro in data.ProductList" @click="gotoProduct(pro.ID)">
                <view class="goods-img">
                    <image :src="easyGetImgUrl(pro.ThumbnailUrl410)"> </image>
                </view>
                <view class="goods-detail">
                    <text class="goods-name">{{ pro.ProductName }}</text>
                    <text class="goods-price color-primary">￥{{ pro.SaleMinPrice }}</text>
                </view>
            </view>
        </view>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { formatRichText } from "@/uni-sub-base/utils/elementUtil.js"
import { copyFn } from "@/uni-sub-base/utils/utils.js"
import { GetMoment } from "@/service/api/moment.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {privacyAgreement},
    data() {
        return {
            id: "",
            data: {},
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.detail()
    },
    onShareAppMessage(res) {
        var that = this
        let imageUrl
        let url
		let userInfo = storage.getCache("userInfo")
        if (res.from === "button") {
            // 来自页面内分享按钮
            if (this.data.VideoUrl) {
                url = "/pages_me/packet/moment/moment_video?id=" + this.data.ID+"&tel="+userInfo.Tel
                imageUrl = this.easyGetImgUrl(this.data.VideoImgSrc)
            } else {
                url = "/pages_me/packet/moment/moment_detail?id=" + this.data.ID+"&tel="+userInfo.Tel
                if (this.data.ImageArray && this.data.ImageArray.length > 0) {
                    let data = that.data.ImageArray
                    imageUrl = that.easyGetImgUrl(data[0])
                }
            }
            return {
                imageUrl: imageUrl,
                title: this.data.Content,
                path: url,
                success(resp) {},
            }
        }
    },
    methods: {
        gotoProduct(id) {
            this.easyGoTo("/pages_shop/packet/product/productDetail?id=" + id)
        },
        detail() {
            GetMoment({ id: this.id, LoadProductData: true }).then((res) => {
                if (res.State) {
                    this.data = res.Data
                }
            })
        },
        formatRichTextFn(text) {
            return formatRichText(text)
        },
        copy(text) {
            copyFn(text)
        },
        saveImage() {
            let imglist = this.data.ImageArray
            for (var i = 0; i < imglist.length; i++) {
                let url = this.easyGetImgUrl(imglist[i])

                uni.downloadFile({
                    url,
                    success: (res) => {
                        // 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                uni.showToast({
                                    title: "保存成功！",
                                })
                            },
                            fail: (error) => {
                                uni.showToast({
                                    icon: "none",
                                    title: "保存失败",
                                })
                            },
                        })
                    },
                })
            }
        },
        saveVideo() {
            let path = this.easyGetImgUrl(this.data.VideoUrl)
            uni.downloadFile({
                //getVideoInfo
                url: path, //src: path
                success: function (res) {
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: () => {
                            uni.showToast({
                                title: "保存成功！",
                            })
                        },
                        fail: (error) => {
                            uni.showToast({
                                icon: "none",
                                title: "保存失败",
                            })
                        },
                    })
                },
            })
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.data.ImageArray,
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    min-height: 100vh;
    height: auto;
    background: #f4f4f4;
}

.inputTab {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 30rpx;
}

.inputBox {
    flex: 1;
    position: relative;
}

.searchIcon {
    position: absolute;
    top: 22rpx;
    left: 30rpx;
}

.searchInput {
    flex: 1;
    font-size: 24rpx;
    line-height: 64rpx;
    height: 64rpx;
    padding: 0 120rpx 0 70rpx;
    border-radius: 32rpx;
    background: #f4f4f4;
}

.searchBtn {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 26rpx;
    display: block;
    height: 64rpx;
    line-height: 64rpx;
    border-radius: 0 32rpx 32rpx 0;
    padding: 0 40rpx 0 30rpx;
    background: #e7e7e8;
}

.addBtn {
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 40rpx;
    margin: 0 10rpx;
}

.scroll-view_H {
    background: #fff;
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
}

.scroll-view-item_H {
    display: inline-block;
    margin: 0 30rpx;
    flex-shrink: 0;
    font-size: 32rpx;
    padding: 13rpx 15rpx 30rpx;
    color: #999;
}

.active {
    border-bottom: 2px solid #61bf4e;
    color: #333;
}

.material-list {
    margin: 20rpx;
}

.material-li {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    overflow: hidden;
    position: relative;
}
.edit-btn {
    position: fixed;
    right: 0;
    top: 500rpx;
    z-index: 1000;
    background: #61bf4e;
    color: #fff;
    border-radius: 26rpx 0 0 26rpx;
}
.edit-btn .icon-edit {
    font-size: 36rpx;
    margin-left: 26rpx;
}
.edit-text {
    font-size: 28rpx;
    display: inline-block;
    line-height: 52rpx;
    padding: 0 30rpx 0 15rpx;
}
.item-head {
    display: flex;
    align-items: center;
}

.head-img {
    height: 68rpx;
    width: 68rpx;
    margin-right: 20rpx;
    overflow: hidden;
    border-radius: 50%;
}
.head-info {
    height: 68rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.head-name {
    font-size: 28rpx;
    line-height: 28rpx;
}
.head-time {
    font-size: 20rpx;
    line-height: 20rpx;
    color: #999;
}

.attBtn {
    position: absolute;
    font-size: 24rpx;
    line-height: 40rpx;
    height: 40rpx;
    background: #fff;
    border-color: currentColor !important;
    top: 25rpx;
    right: 20rpx;
}

.textCont {
    margin-top: 20rpx;
    font-size: 24rpx;
    line-height: 1.5;
}

.imgBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15rpx;
}

.text-img {
    display: inline-block;
    width: calc(33.33% - 5rpx);
    height: 0;
    padding-bottom: calc(33.33% - 5rpx);
    position: relative;
    margin-top: 5rpx;
    margin-right: 5rpx;
    overflow: hidden;
}

.text-img:nth-child(3n + 3) {
    margin-right: 0;
}

.text-img image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoBox {
    position: relative;
    margin-top: 20rpx;
    width: 45%;
    padding-top: 65%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}

.play-btn:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-width: 10px 0 10px 15px;
    border-style: solid;
    border-radius: 3px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
    content: "";
    -webkit-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%);
}

.btn-box {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
}

.downloadBtn {
    width: calc(33% - 13rpx);
    font-size: 28rpx;
    background: #fff;
    border: 1rpx solid;
    border-radius: 8rpx;
    text-align: center;
    border-color: currentColor !important;
    margin: 0;
}

.link {
    margin-top: 40rpx;
    padding-left: 40rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    background: #f5f5f5;
}
.goods-list {
    padding: 0 40rpx;
    background: #ffffff;
}

.goods-li {
    display: flex;
    align-items: flex-start;
    padding: 34rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.goods-img {
    flex-shrink: 0;
    height: 160rpx;
    width: 160rpx;
    margin-right: 18rpx;
    border-radius: 10rpx;
}

.goods-img image {
    width: 100%;
    height: 100%;
}

.goods-detail {
    height: 160rpx;
    box-sizing: border-box;
    padding-bottom: 42rpx;
    position: relative;
    padding-right: 40rpx;
}

.goods-name {
    font-size: 26rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods-price {
    display: block;
    font-size: 28rpx;
    line-height: 42rpx;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    left: 0;
}
.nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 100rpx;
    color: #666;
}
</style>
